<template>
  <div class="pest">
    <p>监测位置：<span>{{ props.position || '--' }}</span></p>
    <img v-if="!!state.img" :src="state.img" alt="123123·">
    <div class="result">
      <div class="title">识别结果</div>
      <div class="wrap" v-for="(v, i) in state.list" :key="i">
        <section>
          <div class="name">害虫名称:</div>
          <div class="value">{{ v.name }}</div>
        </section>
        <section>
          <div class="name">害虫个数:</div>
          <div class="value">{{ v.value }}</div>
        </section>

      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref, reactive } from 'vue';
import {
  getInsectInfo
} from '@/api/map'
const props = defineProps({
  position: {
    default () {
      return '--'
    }
  },
  deviceId: {
    required: true
  }
})

const state = reactive({
  list: [],
  img: ''
})

const getInfo = async () => {
  try {
    const res = await getInsectInfo(props.deviceId)
    state.img = res.data.attachmentVo.fileUrl
    state.list = res.data.insectVos.map (v => ({
      value: v.num, 
      name: v.name
    }))
  } catch (error) {
    console.error(error);
  }


}



onMounted(() => {
  getInfo()
})

</script>

<style lang="scss" scoped>
.pest {
  overflow: auto;
  height: 6.8rem;
}

p {
  font-size: 0.28rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #7E7E7E;
  line-height: 0.4rem;
  margin-bottom: 0.47rem;

  span {
    color: #1E1E1E;
  }
}


img {
  width: 6.86rem;
  height: 3.86rem;
  background: #D8D8D8;
}

.result {
  padding-bottom: 0.39rem;

  .title {
    font-size: 0.28rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #242424;
    line-height: 0.4rem;
    margin-bottom: 0.1rem;
  }

  .wrap {
    display: flex;
    margin-bottom: 0.1rem;

    section {
      display: flex;
      width: 50%;
      flex: 0 0 auto; 

      &:nth-of-type(1) {
        margin-right: 0.5rem;
      }

      .name {
        width: 1.4rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #7E7E7E;
        line-height: 0.4rem;
      }

      .value {
        font-size: 0.28rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #E79247;
        line-height: 0.4rem;
        flex: 1 1 auto; 
        &:nth-of-type(1) {
          width: 3.1rem;
        }
      }
    }

  }
}
</style>